{% extends 'indexTemplate.html' %}

{% load static %}

{% block title %}课程章节 - 慕学在线网{% endblock %}

{% block customCss %}
<link rel="stylesheet" type="text/css" href="{% static '/css/muke/base.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/css/muke/common-less.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/css/muke/course/learn-less.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/css/aui.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/css/mooc.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/css/muke/course/common-less.css' %}">
{% endblock %}

{% block customBread %}
<section>
<div class="wp">
    <div class="crumbs">
        <ul>
            <li><a href="{% url 'index' %}">首页</a>></li>
            <li><a href="{% url 'courses:coursePage' %}">公开课程</a>></li>
            <li><a href="{% url 'courses:courseDetail' course.id %}">课程详情</a>></li>
            <li>章节信息</li>
        </ul>
    </div>
</div>
</section>
{% endblock %}

{% block content %}
<div id="main">
   <div class="course-infos">
    <div class="w pr">
     <div style="height: 15px" class="path"></div>
     <div class="hd">
      <h2 class="l">{{ course.name }}</h2>
     </div>
     <div class="statics clearfix">
      <div class="static-item ">
       <span class="meta-value"><strong>{{ course.get_degree_display }}</strong></span>
       <span class="meta">难度</span>
       <em></em>
      </div>
      <div class="static-item static-time">
       <span class="meta-value">{{ course.learnTimes }}分钟</span>
       <span class="meta">时长</span>
       <em></em>
      </div>
      <div class="static-item">
       <span class="meta-value"><strong>{{ course.students }}</strong></span>
       <span class="meta">学习人数</span>
       <em></em>
      </div>
     </div>
    </div>
   </div>
   <div class="course-info-main clearfix w has-progress">
    <div class="info-bar clearfix">
     <div class="content-wrap clearfix">
      <div class="content">
       <div class="mod-tab-menu">
        <ul class="course-menu clearfix">
         <li>
             <a class="ui-tabs-active {% ifequal active1 'video' %}active{% endifequal %}" id="learnOn" href="{% url 'courses:courseVideo' course.id %}">
                 <span>章节</span>
             </a>
         </li>
         <li>
             <a id="commentOn" {% ifequal active1 'comment' %}class="active"{% endifequal %} href="{% url 'courses:courseComment' course.id %}">
                 <span>评论</span>
             </a>
         </li>
        </ul>
       </div>
       <div id="notice" class="clearfix">
        <div class="l">
         <strong>课程公告:</strong>
         <a href="javascript:void(0)">Spring的文档以及相关的jar文件已上传</a>
        </div>
       </div>
       <div class="mod-chapters">
       {% for courseLesson in course.getCourseLessons %}
        <div class="chapter chapter-active">
         <h3> <strong><i class="state-expand"></i>{{ courseLesson.name }}</strong> </h3>
         <ul class="video">
         {% for lessonVideo in courseLesson.getLessonVideos %}
          <li>
              <a target="_blank" href="{% url 'courses:playVideo' lessonVideo.id %}" class="J-media-item studyvideo">{{ lessonVideo.name }}
                  <i class="study-state"></i>
              </a>
          </li>
         {% endfor %}
         </ul>
        </div>
       {% endfor %}
       </div>
      </div>
      <div class="aside r">
       <div class="bd">
        <div class="box mb40">
         <h4>资料下载</h4>
         <ul class="downlist">
         {% for courseResource in course.getCourseResources %}
          <li>
              <span>
                  <i class="aui-iconfont aui-icon-file"></i>&nbsp;&nbsp;{{ courseResource.name }}
              </span>
              <a href="{{ MEDIA_URL }}{{ courseResource.download }}" class="downcode" target="_blank" download="" data-id="274" title="{{ courseResource.name }}">下载</a>
          </li>
         {% endfor %}
         </ul>
        </div>
        <div class="box mb40">
         <h4>讲师提示</h4>
         <div class="teacher-info">
          <a href="/u/315464/courses?sort=publish" target="_blank">
              <img src="{{ MEDIA_URL }}{{ course.teacher.images }}" width="80" height="80" />
          </a>
          <span class="tit">
              <a href="/u/315464/courses?sort=publish" target="_blank">{{ course.teacher.name }}</a>
          </span>
          <span class="job">{{ course.teacher.workPosition }}</span>
         </div>
         <div class="course-info-tip">
          <dl class="first">
           <dt>课程须知</dt>
           <dd class="autowrap">{{ course.youKnow }}</dd>
          </dl>
          <dl>
           <dt>老师告诉你能学到什么？</dt>
           <dd class="autowrap">{{ course.teacherTell }}</dd>
          </dl>
         </div>
        </div>
        <div class="cp-other-learned  js-comp-tabs">
         <div class="cp-header clearfix">
          <h2 class="cp-tit l">该课的同学还学过</h2>
         </div>
         <div class="cp-body">
          <div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="course" style="display: block">
           <ul class="other-list">
           {% for otherCourse in otherCourses %}
            <li class="curr">
                <a href="{% url 'courses:courseDetail' otherCourse.id %}" target="_blank">
                    <img src="{{ MEDIA_URL }}{{ otherCourse.images }}" alt="{{ otherCourse.name }}" />
                    <span class="name autowrap">{{ otherCourse.name }}</span>
                </a>
            </li>
           {% endfor %}
           </ul>
          </div>
          <div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="plan">
           <ul class="other-list">
            <li class="curr">
                <a href="/course/programdetail/pid/31?src=sug" target="_blank">
                    <img src="http://img.mukewang.com/56551e6700018b0c09600720-240-135.jpg" alt="Java工程师" />
                    <span class="name autowrap">Java工程师</span>
                </a>
            </li>
           </ul>
          </div>
         </div>
        </div>
       </div>
      </div>
     </div>
     <div class="clear"></div>
    </div>
   </div>
  </div>
{% endblock %}